<template>
  <div style="overflow: auto; margin: 20px" v-loading="loading">
    <el-form label-position="right" label-width="100px">
      <el-form-item label="封面">
        <el-upload
          :action="fileUploadUrl"
          :on-progress="onProgress"
          :on-error="uploadErr"
          multiple
          :show-file-list="false"
          :headers="myHeaders"
          :on-success="
            (data, file, fileList) => {
              uploadFinish(data, file, fileList)
              uploadPercentage = 0
            }
          "
        >
          <el-image
            v-if="news.image"
            :src="fileURL + news.image.FL_SrcPath"
            class="upload-button"
            fit="fill"
          />
          <el-button
            v-else
            type="default"
            class="upload-button"
            icon="el-icon-plus"
          ></el-button>
          <el-progress
            v-if="uploadPercentage"
            :percentage="uploadPercentage"
          ></el-progress>
        </el-upload>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="news.NEWS_Title" style="width: 600px"></el-input>
        <el-checkbox v-model="news.NEWS_NeceRead" style="margin-left: 20px">
          紧急通知
        </el-checkbox>
        <el-date-picker
          type="date"
          v-if="news.NEWS_NeceRead"
          style="margin-left: 20px"
          v-model="news.NEWS_NeceLimitTime"
          placeholder="请选择阅读时限"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="内容">
        <myEditor
          v-model="mainEditor"
          @input="
            () => {
              news.NEWS_Content = mainEditor.html
              news.NEWS_ContentTxt = mainEditor.text
            }
          "
          :buttonVis="false"
          style="height: 600px"
        ></myEditor>
      </el-form-item>
    </el-form>
    <div class="btnDiv">
      <el-button
        type="primary"
        round
        size="medium"
        class="btn"
        icon="el-icon-goods"
        @click="addNotice"
      >
        新增
      </el-button>
    </div>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import myEditor from '@/views/components/my-editor'
import { addNews } from '@/api/common/news'
import {
  baseURL,
  fileRoot,
  fileUploadRoot,
  tokenName,
  empIdName,
} from '@/config'

export default {
  data: function () {
    return {
      loading: false,
      mainEditor: {},
      news: {},

      uploadPercentage: 0,
      myHeaders: {},
      fileURL: baseURL + fileRoot,
      fileUploadUrl: baseURL + fileUploadRoot,
    }
  },
  components: {
    myEditor,
  },
  methods: {
    uploadErr: function (err) {
      alert(JSON.stringify(err))
    },
    onProgress: function (event) {
      this.uploadPercentage = Math.round(event.percent * 100) / 100
    },
    uploadFinish(data, file, fileList) {
      if (data.success) {
        this.news.image = data.data
      } else {
        alert(data.errormsg)
      }
    },
    addNotice() {
      this.$message('请稍等')
      this.loading = true
      addNews(this.news)
        .then(() => {
          this.loading = false
          this.$router.go(-1)
        })
        .catch(() => {
          this.loading = false
        })
    },
  },
  created: function () {
    this.myHeaders[tokenName] = this.$store.getters['user/accessToken']
    this.myHeaders[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
  },
}
</script>
<style>
.ql-editor {
  padding: 0;
}
</style>

<style scoped>
.btnDiv {
  height: 80px;
  font-size: 20px;
  position: fixed;
  display: flex;
  bottom: 110px;
  right: 50px;
  z-index: 1000;
}

.upload-button {
  width: 400px;
  height: 200px;
  background-color: #f3f3f3;
  font-size: 16px;
  color: #5f85f6;
  margin-right: 16px;
  margin-bottom: 10px;
}
</style>
